<script setup lang="ts">
import { ref } from "vue";
import DeptForm from "./dept-form.vue";
import { YiAction, YiTable } from "@uublue/yimi-element-plus";
import { forEachRecursively } from "@/utils/array-recursion";

const tableExpandAll = ref(false);
</script>

<!-- 定义api -->
<script lang="ts">
import deptApis from "@/apis/system/dept";

const { getDepartmentTree, addDepartment, updateDepartment, removeDepartment } =
  deptApis;
export default {
  name: "DeptView",
  apis: {
    getDepartmentTree,
    addDepartment,
    updateDepartment,
    removeDepartment,
  },
};
</script>

<template>
  <div class="app-container">
    <yi-table
      :api="getDepartmentTree"
      :columns="[
        {
          label: '部门名称',
          prop: 'name',
        },
        {
          label: '部门代码',
          prop: 'code',
        },
        {
          label: '操作',
          prop: 'opt',
          slot: 'opt',
          width: '360px',
        },
      ]"
      default-expand-all
    >
      <template #conditions="{ model, refresh }">
        <el-form inline :model="model" size="small">
          <el-form-item label="部门名称">
            <el-input
              v-model="model.name"
              placeholder="请输入部门名称"
            ></el-input>
          </el-form-item>
          <el-form-item label="部门代码">
            <el-input
              v-model="model.code"
              placeholder="请输入部门代码"
            ></el-input>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="refresh()">查询</el-button>
          </el-form-item>
        </el-form>
      </template>

      <template #actions="{ refresh, rows, useTableRef }">
        <el-row>
          <!-- 添加 -->
          <yi-action
            :api="addDepartment"
            text="添加"
            type="primary"
            size="small"
            :plain="true"
            icon="el-icon-plus"
            modal-title="添加部门"
            dialog-width="500px"
            @on-submit-success="refresh"
          >
            <template #default="scope">
              <dept-form
                v-model="scope.model"
                :form-ref="scope.form"
                use-for="add"
              />
            </template>
          </yi-action>

          <el-button
            type="info"
            plain
            icon="el-icon-sort"
            size="small"
            @click="
              () => {
                const table = useTableRef();
                if (table) {
                  forEachRecursively(rows, (row) => {
                    table.toggleRowExpansion(row, tableExpandAll);
                  });
                  tableExpandAll = !tableExpandAll;
                }
              }
            "
            >展开/折叠</el-button
          >
        </el-row>
      </template>

      <template #opt="{ row, refresh }">
        <yi-action
          :api="updateDepartment"
          :mix-model="
            (model, mix) => {
              mix({
                data: { id: model.id, name: model.name },
              });
            }
          "
          type="primary"
          trigger="link"
          :underline="false"
          text="修改"
          size="default"
          icon="el-icon-edit"
          :model="row"
          modal-title="修改部门"
          dialog-width="500px"
          @on-submit-success="
            (res, model) => {
              Object.assign(row, model);
            }
          "
        >
          <template #default="scope">
            <dept-form
              v-model="scope.model"
              :form-ref="scope.form"
              use-for="edit"
            />
          </template>
        </yi-action>

        <yi-action
          title="删除部门"
          :api="removeDepartment(row.id)"
          type="primary"
          trigger="link"
          :underline="false"
          text="删除"
          size="default"
          icon="el-icon-delete"
          modal-title="删除部门"
          confirm-text="是否删除该部门？"
          @on-submit-success="
            () => {
              refresh();
            }
          "
        />
      </template>
    </yi-table>
  </div>
</template>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped></style>
